<template>
  <div class="acIndex">
    <div class="leftpart">
      <my-chart :chart-data="chart[0]" :date="yestaday" :chart-option="chart1"></my-chart>
      <my-chart :chart-data="chart[1]" :date="yestaday" :chart-option="chart2"></my-chart>
      <div class="main-table">
        <p><span>空调能耗使用情况</span><span>{{yestaday}}</span></p>
        <table>
          <tr>
            <td>部门名称</td>
            <td>用能面积</td>
            <td>室内平均温度</td>
            <td>用电量</td>
          </tr>
          <tr v-for = "item in departmentConsumRank" :key="item.index">
            <td>{{item.name}}</td>
            <td>{{item.area}}</td>
            <td>{{item.temp}}</td>
            <td>{{item.consum}}kWh</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="centerpart">
      <div class="main-info">      
          <p>当前总负荷</p>
          <span>{{time}}</span>
        <div class="main-info-box">
          <div class="main-info-box-half">
            <div class="main-info-data">
              <i class="lightning"></i>
              <span class="top-num" v-for="item in Math.round(headData.load)+''" :key="item.index">
                <span>{{item}}</span>
              </span>
              <span class="top-unit"><span>kW</span></span>
            </div>
            <!-- <div class="main-info-updata"><i class="fa " :class="[headDatap>0?'fa-caret-up':'fa-caret-down']" aria-hidden="true"></i><span> {{ Math.abs(headDatap).toFixed(2) }}%</span></div> -->
            <chart class="main-info-title" :options="chart5"></chart>
          </div>
          <div class="main-info-box-half">
            <div class="main-info-sub-box">
              <p>昨日能耗</p>
              <div class="buttom-num" v-for="item in headData.consum+''" :key="item.index"><span>{{item}}</span></div>
              <div class="buttom-unit">
                <p>&nbsp;</p>
                <p>kWh</p>
              </div>
            </div>
            <div class="main-info-sub-box">
              <p>昨日节能</p>
              <div class="buttom-num" v-for="item in headData.save+''" :key="item.index"><span>{{item}}</span></div>
              <div class="buttom-unit">
                <p>&nbsp;</p>
                <p>kWh</p>
              </div>
            </div>
            <div class="main-info-sub-box">
              <p>累计节能</p>
              <div class="buttom-num" v-for="item in headData.allsave+''" :key="item.index"><span>{{item}}</span></div>
              <div class="buttom-unit">
                <p>&nbsp;</p>
                <p>kWh</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-process">
        <select v-for="item in eqblocksData" v-model="item.mode" :key="item.index" class="item-option mode">
          <option value="节能">节能</option>
          <option value="手动">手动</option>
          <option value="舒适">舒适</option>
          <option value="智慧">智慧</option>
        </select>
        <div  class="pipes">
          <div v-for="item in pipesData" :key="item.index" class="pipe pip-bg" :class="styleComputer(item)" :style="{width: item.w + 'px', height: item.h + 'px', top: item.y + 'px', left: item.x + 'px'}" ></div>
        </div>
        <div class="blocks">
          <div class="eq-block" v-for="item in eqblocksData" :key="item.index" :class="{'eq-block-gray':!item.power}" :style="{width: item.w + 'px', height: item.h + 'px', top: item.y + 'px', left: item.x + 'px'}">
            <p class="eq-block-img"></p>
            <p>{{ item.name }}</p>
          </div>
        </div>
        <div class="blocks">
          <div class="area-block" v-for="item in blocksData" :key="item.index" :style="{width: item.w + 'px', height: item.h + 'px', top: item.y + 'px', left: item.x + 'px'}">
            <p><span class="block-img"></span>{{ item.name }}</p>
            <p v-if="item.type===1">{{ item.flow }} <span>m³/s</span></p></div>
        </div>
      </div>
    </div>
    <div class="rightpart">
      <my-chart :chart-data="chart[2]" :date="yestaday" :chart-option="chart3"></my-chart>
      <my-chart :chart-data="chart[3]" :date="yestaday" :chart-option="chart4"></my-chart>
      <div class="main-table">
          <p><span>近期节能情况</span></p>
          <table>
            <tr>
              <td>日期</td>
              <td>节电量</td>
           
            </tr>
            <tr v-for = "item in elecConsumsaveThisweek" :key="item.index">
              <td>{{item.name}}</td>
              <td>{{item.consum}}</td>
            </tr>
          </table>
        </div>
    </div>
  </div>
</template>

<script>
// import echarts from 'echarts'
export default {
  name: 'hospitalD_back',
  data () {
    return {
      chartTheme: {},
        chart1: {
          color: ['#e100c4','#8e43ff','#433bff','#00e8d0','#179fff'],
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series : [
            {
              name:'访问来源',
              type:'pie',
              radius : '50%',
              center: ['50%', '50%'],
              data:[
                {value:500, name:'ICU'},
                {value:310, name:'其他'},
                {value:274, name:'住院楼'},
                {value:235, name:'手术室'},
                {value:190, name:'门诊楼'}
              ].sort(function (a, b) { return a.value - b.value; }),
            }
          ]
        },
        chart2: {
          color: [
            "#516b91",
            "#59c4e6",
            "#edafda",
            "#93b7e3",
            "#a5e7f0",
            "#cbb0e3"
          ],
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            // orient: 'vertical',
            textStyle: {color: '#fff'},
            x: 'center',
            y: "20",
            data:['其他', '手术室', 'ICU', '住院楼', '门诊楼']
          },
          
          series: [
            {
              name:'空调能耗占比',
              type:'pie',
              radius: ['30%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                normal: {
                  shadowOffsetY: 4,               
                  shadowBlur: 10,
                  shadowColor: 'rgba(0, 0, 200, .3)'
                }
              },
              label: {
                normal: {
                  show: false,
                  position: 'top'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '15',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:[
                {value:500, name:'ICU'},
                {value:310, name:'其他'},
                {value:274, name:'住院楼'},
                {value:235, name:'手术室'},
                {value:190, name:'门诊楼'}
              ]
            }
          ]
        },
        chart3: {
          color: ['#003366', '#006699', '#4cabce', '#e5323e','#8cacf7'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
          },
          legend: {
            data: ['Forest', 'Steppe', 'Desert', 'Wetland'],
            top: 20,
            textStyle: {color: '#fff'}
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: ['2012', '2013', '2014', '2015', '2016'],
              axisLine: {lineStyle: {color: '#fff'}}
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {lineStyle: {color: '#fff'}},
              splitLine: {lineStyle: {color: 'rgba(255,255,255,0.1)'}}
            }
          ],
          series: [
            {
              name: 'Forest',
              type: 'bar',
              barGap: 0,
              data: [320, 332, 301, 334, 390]
            },
            {
              name: 'Steppe',
              type: 'bar',
              data: [220, 182, 191, 234, 290]
            },
            {
              name: 'Desert',
              type: 'bar',
              data: [150, 232, 201, 154, 190]
            },
            {
              name: 'Wetland',
              type: 'bar',
              data: [98, 77, 101, 99, 40]
            },
            {
              name: 'Wetland',
              type: 'bar',
              data: [98, 77, 101, 99, 40]
            },
            
          ]
        },
        chart4: {
          color: [ '#006699', '#fc00ff','#aaf8fb'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
          },
          legend: {
            data: ['Forest', 'Steppe'],
            top: 20,
            textStyle: {color: '#fff'}
          },
          xAxis: [
            {
              type: 'category',
              data: ['2012', '2013', '2014', '2015', '2016'],
              axisLine: {lineStyle: {color: '#fff'}},
              splitLine: {lineStyle: {color: 'rgba(255,255,255,0.1)'}}
            }
          ],
          yAxis: [
            {
              type: 'value',
              scale: true,
              axisLine: {lineStyle: {color: '#fff'}},
              splitLine: {lineStyle: {color: 'rgba(255,255,255,0.1)'}}
            }
          ],
          series: [
            {
              name: 'Forest',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {normal: {width: 4}},
              data: [320, 332, 301, 334, 390]
            },
            {
              name: 'Steppe',
              type: 'line',
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {normal: {width: 4}},
              smooth: true,
              data: [220, 182, 191, 234, 290]
            },
            {
              name: 'Steppe',
              type: 'line',
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {normal: {width: 4}},
              smooth: true,
              data: [220, 182, 191, 234, 290]
            }
          ]
        },
        chart5: {
          visualMap: {
              show: false,
              color:  ['#7553f3', '#3998f9', '#aaf8fb'] , 
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: 80
            },
            tooltip: {
                trigger: 'axis',
                formatter: "负荷 <br/>{b} : {c}KW",
                axisPointer: {
                  type: 'none'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
            },
            xAxis: {
              show:false,
                type: 'category',
                axisLabel: {
                    formatter: '{value} °C'
                },
                data: ['8:00', '12:00', '16:00', '20:00']                
            },
            yAxis: {
                show:false,
                type: 'value',
            },
            series: [
                {
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    lineStyle: {
                        normal: {
                            width: 5,
                            shadowColor: 'rgba(80, 80, 140, .5)',
                            shadowBlur: 6,
                            shadowOffsetY: 3
                        }
                    },
                    data:[15, 50, 45.5,78.4]
                    
                }
            ]
        },
        chart: [
          {
            title: '昨日各区域能耗',
            date: '2017-08-20'
          },
          {
            title: '昨日空调能耗占比',
            date: '2017-08-20'
          },
          {
            title: '近5日各区域能耗',
            date: '2017-08-20'
          },
          {
            title: '机组用能趋势',
            date: '2017-08-20'
          }
        ],
        time:'',
        headDatap: 0,
        departmentConsumRank:[],
        elecConsumsaveThisweek: [],
        yestaday:'',
        headData: {consum:'---',allsave:'---',save:'--',load:'00'},
        systemRunninginfo: { WATERCOOLER: {power:'1'}},
        pipesData: [
          //水冷
          {p_id:1, type:0, w:86, x:260, y:143},
          {p_id:1, type:1, h:324, x:346, y:40},
          {p_id:1, type:0, w:40, x:350, y:40},
          {p_id:1, type:0, w:40, x:350, y:120},
          {p_id:1, type:0, w:40, x:350, y:200},
          {p_id:1, type:0, w:40, x:350, y:280},
          {p_id:1, type:0, w:40, x:350, y:360},
          //锅炉
          {p_id:2, type:0, w:106, x:260, y:265},
          {p_id:2, type:1, h:324, x:366, y:60},
          {p_id:2, type:0, w:20, x:370, y:60},
          {p_id:2, type:0, w:20, x:370, y:140},
          {p_id:2, type:0, w:20, x:370, y:220},
          {p_id:2, type:0, w:20, x:370, y:300},
          {p_id:2, type:0, w:20, x:370, y:380},
          //风冷
          {p_id:3, type:0, w:70, x:538, y:250},
          {p_id:3, type:3, h:84, x:534, y:200},
          {p_id:3, type:0, w:40, x:494, y:200},
          {p_id:3, type:0, w:40, x:494, y:280},
          //热泵
          {p_id:4, type:0, w:90, x:518, y:270},
          {p_id:4, type:1, h:84, x:514, y:220},
          {p_id:4, type:0, w:20, x:494, y:220},
          {p_id:4, type:0, w:20, x:494, y:300},
        ],
        blocksData: [
          {b_id:8, type:1, name: '门诊楼', power:true, flow:'---', h:60, w:100, x:390, y:15},
          {b_id:9, type:1, name: '住院楼', power:true, flow:'---', h:60, w:100, x:390, y:100},
          {b_id:10, type:1, name: '手术室', power:true, flow:'---', h:60, w:100, x:390, y:185},
          {b_id:11, type:1, name: 'ICU', power:true, flow:'---', h:60, w:100, x:390, y:270},
          {b_id:12, type:1, name: '其他', power:true, flow:'---', h:60, w:100, x:390, y:355}
         ],
        eqblocksData: [
          {e_id: 1,name: '水冷机组',mode:'' ,power:false, x:153, y:87},
          {e_id: 2,name: '锅炉机组',mode:'' ,power:false, x:153, y:206},
          {e_id: 3,name: 'VRV机组',mode:'' ,power:false, x:600, y:87},
          {e_id: 4,name: '风冷机组',mode:'' ,power:true, x:600, y:206}
        ],
    }
  },
  components: {
    'my-chart': {
      props: {
        chartData: {
          type: Object,
          default: function () {
            return { message: '无数据' }
          }
        },
        chartOption: {
          type: Object
        },
        date: {
          type: String
        }
      },
      template: '<div class="chart">\
      <p><span>{{ chartData.title }}</span><span>{{ date }}</span></p>\
      <chart :options="chartOption"></chart>\
      </div>',
      data() {
        return {
        }
      }
    }
  },
  mounted: function () {
    this.getData()
    this.updataTime()
  },
  methods: {
    styleComputer: function (item) {
      var styleArr = [];
      item.type===0?styleArr.push('pipe-h'):styleArr.push('pipe-v');
      switch (item.p_id) {
        case 1:
          if(this.eqblocksData[0].power===true){
            styleArr.push('pipe-back-bg','active');
          }else {
            styleArr.push('pipe-gray-bg');
          }
          break;
        case 2:
          if(this.eqblocksData[1].power===true){
            styleArr.push('pipe-red-bg','active');
          }else {
            styleArr.push('pipe-gray-bg');
          }
          break;
        case 3:
        if(this.eqblocksData[3].power===true){
            styleArr.push('pipe-back-bg','active2');
          }else {
            styleArr.push('pipe-gray-bg');
          }
          break;
        case 4:
        if(this.eqblocksData[3].power===true){
            styleArr.push('pipe-red-bg','active2');
          }else {
            styleArr.push('pipe-gray-bg');
          }
          break;
      }
      return styleArr;
    },
    updataTime: function () {
      let _data = new Date()
      var date = _data.getFullYear() + '-' + this.dateF(_data.getMonth()+1) + '-' + this.dateF(_data.getDate())
      var time = this.dateF(_data.getHours()) + ':' + this.dateF(_data.getMinutes())
      this.time = date + ' ' + time
    },
    dateF: function (d){
      return d<10?'0'+d:d
    },
    getData: function () {
      this.$http('/vqdisplay/ac/data')
      .then( (response) => {
        if (response.status===200) {


          let _data = response.data.body;


          if (_data.consum_yesterday_pie) {
            this.chart1.series[0].data = _data.consum_yesterday_pie.series;
          }
          if (_data.branch_consum_pie) {
            this.chart2.series[0].data = _data.branch_consum_pie.series;
            this.chart2.legend.data = _data.branch_consum_pie.legend;
          }

          this.departmentConsumRank = _data.department_consum_rank||[]
          this.yestaday = _data.department_consum_rank[0].time||''
          this.elecConsumsaveThisweek = _data.elec_consumsave_thisweek||''
          this.headData = _data.head_data

          this.chart5.xAxis.data = _data.loadtrend_today.xAxis
          this.chart5.series[0].data = _data.loadtrend_today.series[0]['总负荷']
          let _l = _data.loadtrend_today.series[0]['总负荷'].length-1
          let _p = (parseFloat(_data.loadtrend_today.series[0]['总负荷'][_l])-parseFloat(_data.loadtrend_today.series[0]['总负荷'][_l-1]))/parseFloat(_data.loadtrend_today.series[0]['总负荷'][_l-1])
          this.headDatap = (_p*100)

          var _id = {WATERCOOLER:0,BOILER:1,AIRCOOLER:3}
          var _idsub = {CLINICBUILDING:0,HOSPITALIZED:1,OPERATINGROOM:2,ICU:3,OTHER:4}
          _data.system_runninginfo.forEach(element => {
            let key = _id[element.flag]
            if ( element.flag==='WATERCOOLER' ) {
              element.children.forEach(e=>{
                let key = _idsub[e.flag]
                this.blocksData[key].power = e.power==='1'
                this.blocksData[key].flow = e.flow
              })
            }
            this.eqblocksData[key].power = element.power==='1'
            this.eqblocksData[key].mode = element.mode
          });

          this.chart3.legend.data = _data.branchconsum_thisweek_bar.legend
          this.chart3.xAxis[0].data = _data.branchconsum_thisweek_bar.xAxis
          for(var i in _data.branchconsum_thisweek_bar.series) {
            this.chart3.series[i].name = _data.branchconsum_thisweek_bar.legend[i]
            this.chart3.series[i].data = _data.branchconsum_thisweek_bar.series[i][_data.branchconsum_thisweek_bar.legend[i]]
          }

          this.chart4.legend.data = _data.systemconsum_thisweek_line.legend
          this.chart4.xAxis[0].data = _data.systemconsum_thisweek_line.xAxis
          for(var i in _data.systemconsum_thisweek_line.series) {
            this.chart4.series[i].name = _data.systemconsum_thisweek_line.legend[i]
            this.chart4.series[i].data = _data.systemconsum_thisweek_line.series[i][_data.systemconsum_thisweek_line.legend[i]]
          }
        }
      })
    }
  }
}
</script>

<style >
  @import '../../../style/acIndex.css';
  .echarts {
    height: 250px;
    width: 100%;
  }
  .main-info-title {
    display: inline-block;
    height: 100px!important;
    width: 50%!important;
    vertical-align: top;
  }
</style>